<template>
  <div class="van-popup-box">
    <van-popup v-model="showPicker" :close-on-click-overlay="false" position="bottom">
      <input style="width:80%;margin:8px 10% 8px 10%;border:1px solid #f8f8f8;padding: 6px;background-color:#f7f8fa;border-radius: 6px;" v-model.trim="vanPickerSeachVal" v-on:input="vanPickerSeach()" placeholder="请输入搜索内容">
      <van-picker :columns="columns" show-toolbar @confirm="confirm" @cancel="closePicker()" />
    </van-popup>
  </div>
</template>
<script>
export default {
  props: ["showPicker", "columns"],
  data() {
    return {
      saveColumns: [], //保存原来的值
      vanPickerSeachVal: "" //输入的搜索条件
    };
  },
  watch: {
    showPicker(val) {
      if (val) {
        this.saveColumns = JSON.parse(JSON.stringify(this.$parent.columns));
      }
    }
  },
  methods: {
    //关闭展示层
    closePicker() {
      this.$parent.showPicker = false;
    },
    //搜索
    vanPickerSeach() {
      if (!this.vanPickerSeachVal) {
        this.$parent.columns = this.saveColumns;
      } else {
        this.$parent.columns = [];
        for (let i = 0; i < this.saveColumns.length; i++) {
          let bool = this.saveColumns[i].indexOf(this.vanPickerSeachVal);
          if (bool != -1) {
            this.$parent.columns.push(this.saveColumns[i]);
          }
        }
      }
    },
    confirm(value) {
      console.log(value);
      this.closePicker();
      //   this.$emit("setData", val);
    }
  }
};
</script>
<style scoped>
.van-popup-box {
  width: 100%;
  height: auto;
}
</style>

